<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
	<meta charset="utf-8">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link type="text/css" rel="stylesheet" href="../../template/css/com/com.css"/>
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css"/>
	<link rel="stylesheet" href="../../resource/weuimin.css" />
    <link rel="stylesheet" href="../../resource/jinsuistyle.css" />
	<script src="../../template/js/jquery.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script src="../../script/api.js"></script>
    <style type="text/css">

    	body{
    	    background-color: #f1f1f1 !important;
    	}
      #But_serachHotel{
        width: 75%;
        height: 45px;
        background-color: #F8562E;
        margin:3%;
        font-size: 20px;
        color:#ffffff;
        line-height: 45px;
        vertical-align: middle;
        text-align: center;
        float:left
      }

      .condition_query{
        width: 94%;
        height: 50px;
        background-color: #E8E8E8;
        margin:3%;
        margin-top: 4%;
      }

      .condition_query_title{
        width: 65px;
        height: 50px;
        /*background-color: blue;*/
        line-height:50px;
        margin-left: 5px;
        font-size: 15px;
        float: left;
        color: #808080;
        vertical-align:middle;
        /*font-family: 'KaiTi_GB2312';*/
      }

      .condition_query_txt{
        width: 265px;
        /*设置超过DIV后隐藏*/
         overflow: hidden;
        text-overflow: ellipsis;
         white-space: nowrap;
        /*background-color: red;*/
        height: 50px;
        line-height:50px;
        font-size: 18px;
        color: #111111;
        float: left;
        vertical-align:middle;
      }
      .condition_query_time{
        background-color: #E8E8E8;
        height: 38px;
        width: 100px;
        float: left;
        position: relative;
      }

      .starLevel_checkbox{
        height:20px;
        width:20px;
        margin: 3px;
        float: left;
      }

      .saterLevel_txt{
          float: left;
          height:30px;
          width: 85px;
          line-height: 20px;
          /*text-align: center;*/
          margin-left: 5px;
          vertical-align: middle;
          font-size: 15px;
          color: #d1d1d1;
      }
      .sureButton{
        width: 90%;
        height: 45px;
        margin-left: 5%;
        background-color: #F8562E;
        /*margin:3%;*/
        font-size: 20px;
        color:#ffffff;
        line-height: 45px;
        vertical-align: middle;
        text-align: center;
      }


        </style>
          <script type="text/javascript">
            var doubliSlierId;
            var judge=1;
            var sliderUpperValue;
            var sliderLowerValue;
          window.apiready = function() {
            getMyLocation();

            var startTime = document.getElementById('startTime');
            var endTime = document.getElementById('endTime');
            checkOutEnd = getNowFormatDate(getDate(),1);
            checkOutStart = getNowFormatDate(getDate(),0);
            $("#startTime").val(checkOutStart);
            $("#endTime").val(checkOutEnd);
            $api.attr(startTime, 'min', checkOutStart);
            $api.attr(endTime, 'min', checkOutEnd);



            var doubleSlider = api.require('doubleSlider');
            doubleSlider.open({
                animation: true,
                orientation: 'horizontal',
                rect: {
                    x: 30,
                    y: 520,
                    size: 300
                },
                bubble: {
                    direction: 'top',
                    state: 'always',
                    w: 50,
                    h: 30,
                    size: 14,
                    color: '#888',
                },
                handler: {
                    w: 40,
                    h: 25 ,
                    lowerBg: 'widget://image/search_zc/handler.png',
                    upperBg: 'widget://image/search_zc/handler.png'
                },
                bar: {
                    h: 10,
                    bg: 'widget://image/search_zc/bar_active.png',
                    active: 'widget://image/search_zc/bar_bg.png'
                },
                value: {
                    min: 0,
                    max: 500,
                    step: 0.5,
                    lowerInit: 0,
                    upperInit:500
                },
                fixedOn: api.frameName,
                fixed: false
            }, function(ret, err) {
                if (ret) {


                    // alert(JSON.stringify(ret));
                    doubleSliderId=ret.id;
                    if(ret.upperValue!=500)
                    sliderUpperValue = ret.upperValue;
                      if(ret.upperValue==500){
                        sliderUpperValue="无限";
                      }
                    sliderLowerValue = ret.lowerValue;
                    // alert(doubleSliderId);
                    if(judge==1){
                        hide_doubliSplier();
                        judge=0;
                    }
                    // alert(ret.sliderUpperValue);
                    if (ret.upperValue==500) {
                      var doubleSlider = api.require('doubleSlider');
                        doubleSlider.setBubble({
                            id: doubleSliderId,
                            content: '不限'
                        });
                    }
                    // alert(sliderUpperValue);
                } else {
                    alert(JSON.stringify(err));
                }


            });


            var timeRecord = {
              startTime:'',
              endTime:'',
              changeTime:''
            }
            function touchstartFn(){
              timeRecord.startTime = new Date().getTime();
              openArea.style.color = "#660099";
            }

            function touchendFn(){
              timeRecord.endTime = new Date().getTime();
              timeRecord.changeTime = timeRecord.endTime - timeRecord.startTime;
              if(timeRecord.changeTime<300){
                opennima();
              }
              openArea.style.color = "#005DA9";
            }
            api.addEventListener({
                name: 'returnSearchDestination'
            }, function(ret, err) {
                // alert(JSON.stringify(ret.value));
                var name = ret.value.name;
                  $("#myDestination").html(name);
            });

        }


          function modifyStartTime(){
              var st = $("#startTime").val();
              var startTime = getNowFormatDate(st,0);
              var endTime = getNowFormatDate(st,1);
              $("#endTime").val(endTime);
              var et = document.getElementById('endTime');
              $api.attr(et, 'min', endTime);
         }

        function modifyEndTime(){
           var startDate = $("#startTime").val();
           var endDate = $("#endTime").val();
           var ddate = getDays(startDate,endDate);
           $("#rest_day").html("共"+ddate+"晚");
         }

         function getDays(date1 , date2){
           var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
           //根据年 . 月 . 日的值创建Date对象
           var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
           var date2Str = date2.split("-");
           var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
           var t1 = date1Obj.getTime();
           var t2 = date2Obj.getTime();
           var dateTime = 1000*60*60*24; //每一天的毫秒数
           var minusDays = Math.floor(((t2-t1)/dateTime));//计算出两个日期的天数差
           var days = Math.abs(minusDays);//取绝对值
           return days;
        }

        function getNowFormatDate(date,addDayCount) {
           var now = new Date(date);
           now.setDate(now.getDate()+addDayCount);
           //格式化日，如果小于9，前面补0
           var day = ("0" + now.getDate()).slice(-2);
           var mday =  ("0" + now.getDate()).slice(-2);
           var month = ("0" + (now.getMonth() + 1)).slice(-2);
           //拼装完整日期格式
           var newDate = now.getFullYear()+"-"+(month)+"-"+(day) ;
           return newDate;
       }

       function getDate(){
         var ddd = new Date();
         var day =ddd.getDate();

         if(ddd.getMonth()<10){
         var month = "0"+(ddd.getMonth()+1);
         }

         if(ddd.getDate()<10){
          day = "0"+ddd.getDate();
         }

         var datew = ddd.getFullYear()+"-"+month+"-"+day;
         return datew;
       }


       function sure_star_level(){
         obj = document.getElementsByName("starLevel");
        //  alert(obj);
          check_val = [];
          var str = "";
          var cnt = 0;
          for(k in obj){
             if(obj[k].checked){
                  check_val.push(obj[k].value);
                  if(obj[k].value==0){
                    str+="无星级;";
                  }else
                  str+=(obj[k].value+"星级;");
                  cnt++;
             }
          }
          // str+=(sliderLowerValue+"~"+sliderUpperValue+";");
        $('#choose_starLevel').hide();
        if(cnt==0){
             $("#star_level").html("星级不限");
        }else {
             $("#star_level").html(str);
        }

       $("#priceRange").html("¥"+sliderLowerValue+"~"+"¥"+sliderUpperValue+";");
      //  sliderUpperValue = ret.upperValue;
      //  sliderLowerValue = ret.lowerValue;
       }


        function sure_price1(){
          hideSlider();
          $('#choose_price').hide();

        }

        //显示doubliSplier控件
        function show_doubliSplier(){
          var doubleSlider = api.require('doubleSlider');
          doubleSlider.show({
              id: doubleSliderId
          });
        }

        //隐藏doubliSplier控件
        function hide_doubliSplier(){
          var doubleSlider = api.require('doubleSlider');
          doubleSlider.hide({
              id: doubleSliderId
          });
        }


        //打开订单页面
      function orderHistory(){
          api.openWin({
              name: 'orderHistory',
              url: './orderHistory.html'
            });
      }

      function open_my_hotel(){
        api.openWin({
            name: 'my_hotel',
            url: './my_hotel.html'
          });
      }

      function open_my_Bmap(){
          api.openWin({
            name: 'my_Bmap',
            url: './my_Bmap.html',

          });
  }

      function open_hotel_reserve_home(){
        api.openWin({
            name: 'hotel_reserve_home',
            url: './hotel_reserve_home.html'
          });

      }

      function  destination(){
        api.openWin({
            name: 'hotel_search_destination',
            url: './hotel_search_destination.html'
          });

        // api.ajax({
        //     url: 'http://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak=asUbdVtZj9NRifoZkMeTrqzSsGddlCGH',
        //     method: 'get',
        // }, function(ret, err) {
        //     if (ret) {
        //         api.alert({ msg: JSON.stringify(ret) });
        //     } else {
        //         api.alert({ msg: JSON.stringify(err) });
        //     }
        // });
      }


      function getMyLocation() {
        var bMap = api.require('bMap');
        bMap.getLocation({
            accuracy: '100m',
            autoStop: true,
            filter: 1
        }, function(ret, err) {
            if (ret.status) {
                      var xStation = ret.lon;
                      var yStation = ret.lat;
                        bMap.getNameFromCoords({
                            lon: xStation,
                            lat: yStation
                        }, function(ret, err) {
                            if (ret.status) {
                                var data = ret.poiList;
                                var add = data[0].address;
                                  $("#myDestination").html(add);
                            }
                        });

            } else {
                alert(err.code);
            }
        });
      }


      // function openBMap(){
      //   var bMap = api.require('bMap');
      //   bMap.getLocation({
      //       accuracy: '100m',
      //       autoStop: true,
      //       filter: 1
      //   }, function(ret, err) {
      //       if (ret.status) {
      //                 var xStation = ret.lon;
      //                 var yStation = ret.lat;
      //
      //                             var map = api.require('bMap');
      //                             map.open({
      //                                 rect: {
      //                                     x: 0,
      //                                     y: 0,
      //                                     w: 320,
      //                                     h: 300
      //                                 },
      //                                 center: {
      //                                     lon: xStation,
      //                                     lat: yStation
      //                                 },
      //                                 zoomLevel: 13,
      //                                 showUserLocation: true,
      //                                 fixedOn: api.frameName,
      //                                 fixed: true
      //                             }, function(ret) {
      //                                 if (ret.status) {
      //                                     alert('地图打开成功');
      //                                 }
      //                             });
      //
      //       } else {
      //           alert(err.code);
      //       }
      //   });
      // }
          </script>
 </head>
    <body>
  <header id="statusBar">
        <div style="margin-top:25px;;height:190px;background:url('../../image/search_zc/search_head.jpg');display: table;width: 100%;background-size:100%">
           <div style="height:50px;line-height: 50px;color: #ffffff;">
               <div style="width: 26%;margin-left: 4%;font-size: 16px;float: left;" onclick="api.closeWin();">
	           返回
	           </div>
	           <div style="text-align: center;font-weight:bold;width: 40%;font-size: 20px;float: left;color:#444444">

	           </div>
           </div>
        </div>
	</header>


	<div class="com-content" style="padding-top: 0px;background-color:#ffffff;position:relativ">
    <div id=choose_starLevel style="margin-top:55%;height:60%;width:100%;background-color: rgba(9, 9, 9, 0.8);;position:absolute;display: none">
      <div style="height:20px;width:100%;">
          <div style="float:left;height:20px;width:50px;font-size:15px;line-height:20px;text-align:center;color:#FFFFFF">星级</div>
      </div>
          <div style="height:160px;width:100%;margin-left:10px">
              <input class="starLevel_checkbox"  type="checkbox" name="starLevel" value="0" /> <div class="saterLevel_txt"> 无星级</div>
              <input class="starLevel_checkbox"  type="checkbox" name="starLevel" value="1"/><div class="saterLevel_txt"> 一星级</div>
              <input class="starLevel_checkbox" type="checkbox" name="starLevel" value="2" /> <div class="saterLevel_txt"> 二星级</div>
              <input class="starLevel_checkbox"  type="checkbox" name="starLevel" value="3"/><div class="saterLevel_txt"> 三星级</div>
              <input class="starLevel_checkbox" type="checkbox" name="starLevel" value="4" /> <div class="saterLevel_txt"> 四星级</div>
              <input class="starLevel_checkbox"  type="checkbox" name="starLevel" value="5"/><div class="saterLevel_txt"> 五星级</div>
              <div style="height:20px;width:100%;margin-left:-10px">
                  <div style="float:left;height:20px;width:50px;font-size:15px;line-height:20px;text-align:center;color:#FFFFFF">价格</div>
              </div>
          </div>
        <div id="sure_starLevel" class="sureButton" onclick="sure_star_level();hide_doubliSplier()">确定</div>

    </div>



      <div class="condition_query">
          <div class="condition_query_title">目的地</div>
          <div id="myDestination" class="condition_query_txt" style="width:200px;" onclick="destination()"><span style="color:#AAAAAA">定位中...</span></div>
          <div  style="float:right;width:50px;height:50px" onclick="getMyLocation()">
            <div style="width:16px;height:16px;margin-left:17px;margin-top:5px;background:url('../../image/search_zc/myLocation.png');background-size:100%"></div>
            <div style="width:50px;height:26px;line-height:26px;font-size:10px;text-align:center">我的位置</div>
          </div>

      </div>
      <div class="condition_query" style="height:80px">
          <div class="condition_query_title"style="height:80px;line-height:80px">时间</div>
          <div class="condition_query_txt"style="height:40px;line-height:40px;color:#888;font-size:15px">
            <div style="width:40px;height:40px;margin-right:0px;float:left">入住:</div>
            <div class='condition_query_time'>
                 <input id="startTime"  style="border: none;height:35px;font-size: 16px;appearance:none;width: 100%;text-align: center;background-color:E8E8E8" type="date" value=""  min="" onchange="modifyStartTime()"/>
            </div>
          </div>
          <div class="condition_query_txt"style="height:40px;line-height:40px;color:#888;font-size:15px">
            <div style="width:40px;height:40px;margin-right:0px;float:left">离店:</div>

            <div class='condition_query_time'>
                 <input id="endTime"  style="border: none;height:35px;font-size: 16px;appearance:none;width: 100%;text-align: center;background-color:E8E8E8" type="date" value=""  min="" onchange="modifyEndTime()"/>
            </div>
            <div id="rest_day" style="height:35px;float: right;width:50px;text-align: center;color: #8B8970;">
            共1晚
            </div>
          </div>
      </div>
      <div class="condition_query">
          <div class="condition_query_title">搜索</div>
            <input id='quary_text' type="text" name="input" style="height:36px;width:260px;margin-left:0px;border:0px" placeholder="关键字/酒店名"  />
      </div>
      <div class="condition_query" style="height:70px">
          <div class="condition_query_title" style="height:70px;line-height:70px">星级价格</div>
          <div id="star_level" style="width:260px;height:28px;margin-top:7px;background-color:#FFFFFF;float:left;line-height:28px;font-size:15px" onclick="$('#choose_starLevel').show();show_doubliSplier()" ></div>
          <div id="priceRange" style="width:260px;height:28px;background-color:#FFFFFF;float:left;line-height:28px;font-size:15px" onclick="$('#choose_starLevel').show();show_doubliSplier()" ></div>

          <!-- <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >星</div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >~</div>
          <div style="width:80px;height:40px;background-color:#FFFFFF;margin-top:5px;float:left" ></div>
          <div style="width:30px;height:50px;float:left;font-size:22px;line-height:50px;text-align:center" >星</div> -->
      </div>
      <div id='But_serachHotel' onclick="open_hotel_reserve_home()">查找酒店
      </div>

      <div style="height: 45px;width: 45px;margin:3%;background:url('../../image/search_zc/location1.jpg');float:left;background-size:100%" onclick="open_my_Bmap()"></div>

      <div style="height: 40px;width:100%;float:left">
        <div style="height: 50px;width:45%;margin-left:5%;float:left;"  onclick="open_my_hotel();">
          <div style="margin:7px;height:26px;width:26px;background:url('../../image/search_zc/myHotel.png');float:left;background-size:100%"></div>
          <div style="margin-top:9px;height:26px;width:105px;float:left;line-height:26px;font-size:18px;border-right:solid 1px #999999">我的酒店</div>
        </div>
          <div style="height: 40px;width:43%;margin-left:5%;float:left;" onclick="orderHistory();">
            <div style="margin:7px;height:26px;width:26px;background:url('../../image/search_zc/myOrder.png');float:left;background-size:100%"></div>
            <div style="margin-top:9px;height:26px;width:80px;float:left;line-height:26px;font-size:18px">我的订单</div>
          </div>
      </div>
<!-- background:url('../../image/search_zc/location1.jpg')
		</div>
	</div> -->
	<!-- 加载动画 -->
	<div id="loadingToast" style="display:none;">
			<div class="weui-mask_transparent"></div>
			<div class="weui-toast">
				<i class="weui-loading weui-icon_toast"></i>
				<p class="weui-toast__content">数据加载中...</p>
			</div>
		</div>
	<!-- 公共底部，必须引用 -->

<!--			<div class="com-footer-area footer" id="js-com-footer" style="width:100%;height: 8%;">
				<img src="../../image/db.png" style="width:100%;"/>
			</div>-->

</body>

</html>
